<HTML><HEAD>
<!--
----------------
Handling "Enter"
----------------
-->
<SCRIPT LANGUAGE="JavaScript"><!-- hide from old browsers
/*
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
Copyright (c)1998 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
*/
// Substitute character string c1 for every c2 in aString
function subst(aString, c1, c2)
{
// string offset avoids infinite recursion
var argc = subst.arguments.length
if (argc < 4) {n = 0} else {n = subst.arguments[3]}
// find the first occurance of c1 after the threshold
var i = aString.indexOf(c1, n)
if (i < 0) return aString
// extract substrings s1 and s2 around the c1, replace and recurse
var s1 = aString.substring(0, i)
var s2 = aString.substring(i+c1.length, aString.length)
return subst(s1+c2+s2, c1, c2, (i+c2.length))
}
// code
function code(v, x)
{
if (x.length == 0) return ""
var tmp = ""+x
tmp = subst(tmp, " ", "%20")
tmp = subst(tmp, ",", "%2C")
tmp = subst(tmp, ";", "%3B")
return v+"="+tmp
}
// Pluses must be placed only between valid entries
function merge(s1, s2)
{
if ((s1.length > 0) && (s2.length > 0)) return(s1+'+'+s2)
return(s1+s2)
}
// Handle "submission"
function doEnter()
{
var t1 = code('f1', document.forms[0].F1.value)
var t2 = code('f2', document.forms[1].F1.value)
var t3 = code('f3', document.forms[2].F1.value)
var tmp = merge(t1, t2)
tmp = merge(tmp, t3)
//replace this with a real call to a new location.HREF
alert("HTTP://www.foo.com?"+tmp)
}
// Handle "Tab"s
function doTab(n)
{
// swap fields (or catch ending conditions)
document.forms[n].F1.focus()
document.forms[n].F1.select()
}
<!-- done hiding --></SCRIPT></HEAD>
<BODY bgcolor="ffffff" link="0000ff" vlink="770077"
onLoad="document.forms[0].F1.focus();document.forms[0].F1.select()">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>Making "Enter" work for multiple fields</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
Forms with a single text field will autosubmit when you press enter.
Here's how you can make this convenient feature work for multiple fields.
(Use tabs to move between fields)
</FONT>
<FORM onSubmit="doEnter(1); return false">
F1: <INPUT TYPE='TEXT' NAME='F1' onBlur="doTab(1)">
</FORM><br>
<FORM onSubmit="doEnter(2); return false">
F2: <INPUT TYPE='TEXT' NAME='F1' onBlur="doTab(2)">
</FORM><br>
<FORM onSubmit="doEnter(0); return false">
F3: <INPUT TYPE='TEXT' NAME='F1' onBlur="doTab(0)">
</FORM>
</FONT></BLOCKQUOTE>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
This is not, in fact, a single form. Three forms
work together to mimic a form which submits on "Enter".
These forms use the <FONT COLOR="770000">merge</FONT>
function to combine distributed data into a single
submission.
</FONT>
<FONT COLOR="770000"><PRE>
// Pluses must be placed only between valid entries
function merge(s1, s2)
{
if ((s1.length > 0) && (s2.length > 0)) return(s1+'+'+s2)
return(s1+s2)
}
// Handle "submission"
function doEnter()
{
var t1 = code('f1', document.forms[0].F1.value)
var t2 = code('f2', document.forms[1].F1.value)
var t3 = code('f3', document.forms[2].F1.value)
var tmp = merge(t1, t2)
tmp = merge(tmp, t3)
//replace this with a real call to a new location.HREF
alert("HTTP://www.foo.com?"+tmp)
}
</PRE></FONT>
<FONT SIZE=4>
In early versions
of Navigator 2.0 and 3.0, the fields sometimes "chase" each
other creating a nifty strobe effect.
Simply reload and this problem will stop.
</FONT>
<h5>Copyright ©1996 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>